<template>
  <el-dialog v-model="show" title="配置收款信息" id="config_dialog" :fullscreen="true" class="custom_dialog" width="100%">
    <div v-if="show" class="container_box">
      <div v-if="showCount >= 1" class="con">
        <AccountPlate :pay-list="payList" :data-info="dataInfo" @view-info="viewPlateInfo" />
      </div>

      <Transition>
        <div v-if="showCount >= 2" class="con">
          <AccountNumber
            ref="accountNumberRef"
            :pay-list="payList"
            :plate-info="plateInfo"
            @change-config="accountNumberChange"
            @change-type="changeAccountType"
            @setFirst="setFirst"
          />
        </div>
      </Transition>
    </div>
    <Transition name="third">
      <div v-if="showCount >= 3" class="con third_con">
        <AccoutConfig
          :account-info="accountInfo"
          :account-type="accountType"
          :plate-info="plateInfo"
          :pay-list="payList"
          @success="saveAccountSuccess"
          @loadingSuccess="loadingSuccess"
          @setSecend="setSecend"
        />
      </div>
    </Transition>
  </el-dialog>
</template>

<script setup>
import AccountPlate from './components/accountPlate.vue';
import AccountNumber from './components/accountNumber.vue';
import AccoutConfig from './components/accountConfig.vue';
const accountNumberRef = ref({});
const setFirst = () => {
  showCount.value = 1;
};
const setSecend = () => {
  showCount.value = 2;
};
const saveAccountSuccess = () => {
  accountNumberRef.value.getList();
  setSecend();
};
const props = defineProps({
  dataInfo: {
    type: Object,
    default: () => {}
  },
  payList: {
    type: Array,
    default: () => []
  }
});

const show = ref(false);
const showCount = ref(1);
const changeCount = (number) => {
  showCount.value = showCount.value + number;
};

const showPayReceive = ref(false);
const selectReceiveList = ref([]);
const handleSelectionReceiveChange = (val) => {
  selectReceiveList.value = val;
};
const submitReceive = () => {
  console.log(selectReceiveList.value);
};

const plateInfo = ref({});
const viewPlateInfo = (row) => {
  plateInfo.value = row;
  setSecend();
};

const accountInfo = ref({});
const accountNumberChange = (row) => {
  accountInfo.value = row;
  showCount.value = 3;
  loadingSuccess();
};
const loadingSuccess = () => {
  setTimeout(() => {
    document.querySelector('#config_dialog .el-dialog__body').scrollTo({
      top: 50000,
      left: 0,
      behavior: 'smooth'
    });
  }, 200);
};
const accountType = ref('add');
const changeAccountType = (val) => {
  accountType.value = val;
};

watch(
  () => show.value,
  (val) => {
    if (!val) {
      showCount.value = 1;
      accountInfo.value = {};
      selectReceiveList.value = [];
      plateInfo.value = {};
    }
  }
);

defineExpose({ show });
</script>

<style scoped>
.container_box {
  margin: 0 auto;
  display: flex;
  background-color: #fff;
  gap: 20px;
  .con {
    height: calc(90vh - 50px) !important;
    overflow: auto;
    flex: 1;
    &:nth-child(1) {
      flex: 1;
    }
    &:nth-child(2) {
      flex: 1;
    }
  }
}
.third_con {
  margin-top: 20px;
  max-height: 80vh;
  min-height: 40vh;
}
.v-enter-active,
.v-leave-active {
  transition: all 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
  transform: translateX(-30%);
}
</style>

<style>
#config_dialog {
  .el-dialog__body {
    max-height: calc(100vh - 90px) !important;
  }
}
</style>
